{{!
# Copyright (C) 2013 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
}}

<h1 class="screenreader-only">{{#t}}Conversations{{/t}}</h1>

<div class="conversations">
  <header class="panel">
    <div class="panel__primary">
      <div class="filters">
        <span aria-hidden="true" class="screenreader-only" id="course-filter-description">
          {{#t}}Filter messages by course{{/t}}
          &nbsp;
          <span class="current-selection-label"></span>
        </span>
        <select class="course-filter" id="course-filter" aria-haspopup="true" aria-labelledby="course-filter-description"></select>
        <span aria-hidden="true" class="screenreader-only" id="type-filter-description">
          {{#t}}Filter messages by type{{/t}}
          &nbsp;
          <span class="current-selection-label"></span>
        </span>
        <select class="type-filter show-tick" id="type-filter" aria-haspopup="true" aria-labelledby="type-filter-description">
          <option value="inbox">{{#t}}Inbox{{/t}}</option>
          <option value="unread">{{#t}}Unread{{/t}}</option>
          <option value="starred">{{#t}}Starred{{/t}}</option>
          <option value="sent">{{#t}}Sent{{/t}}</option>
          <option value="archived">{{#t}}Archived{{/t}}</option>
          <option value="submission_comments">{{#t}}Submission Comments{{/t}}</option>
        </select>
      </div>
      </div>
      <div class="panel__secondary">
      <div class="actions" id="submission-comment-actions" style="display: none;">
        <button class="btn"
                id="submission-reply-btn"
                title="{{#t}}Reply{{/t}}"
                data-tooltip
                disabled>
          <span class="screenreader-only">{{#t}}Reply{{/t}}</span>
          {{> icons/reply-2}}
        </button>
      </div>

      <div class="actions" id="conversation-actions">
	<a href="/conversations?compose=1&id=new">
        <button class="btn"
                id="compose-btn"
                title="{{#t}}Compose a new message{{/t}}"
                data-tooltip>
          {{> icons/compose}}
        </button>
	</a>

        <div class="btn-group">
          <button class="btn"
                  id="reply-btn"
                  title="{{#t}}Reply{{/t}}"
                  {{button-state}}>
            {{> icons/reply-2}}
          </button>
          <button class="btn"
                  id="reply-all-btn"
                  title="{{#t}}Reply all{{/t}}"
                  {{button-state}}>
            {{> icons/reply-all-2}}
          </button>
          <button class="btn"
                  id="archive-btn"
                  title="{{#t}}Archive{{/t}}"
                  {{button-state}}>
            {{> icons/collection-save}}
          </button>
          <button class="btn"
                  id="delete-btn"
                  title="{{#t}}Delete{{/t}}"
                  {{button-state}}>
            {{> icons/trash}}
          </button>
          <button class="btn"
                  id="mark-as-unread-btn"
                  title="{{#t}}Mark as unread{{/t}}"
                  {{button-state}}>
            {{> icons/mark-as-unread}}
          </button>
          <button class="btn"
                  id="mark-as-unread-btn"
                  title="{{#t}}Mark as read{{/t}}"
                  {{button-state}}>
            {{> icons/mark-as-unread}}
          </button>
          <button class="btn"
                  id="forward-btn"
                  title="{{#t}}Forward{{/t}}"
                  {{button-state}}>
            {{> icons/forward}}
          </button>
 
        </div>
      </div>

    </div>
  </header>

  <div class="row-fluid messaging-wrapper">
    <div class="span4 message-list-scroller">
      <div class="message-list">
	{{> views/jst/conversations/messageList}}
      </div>
    </div>
    <div class="span8 message-detail">
	{{> views/jst/conversations/messageDetail}}
    </div>
  </div>
</div>
